Site Content Navigator For WordPress
Site Content Navigator for WordPress is a plugin created to facilitate the navigation on a website page. Plugin comes with customizable progress bar indicating current reading progress, additional interaction options allow to quickly navigate around the page.
Key plugin feature is support for sections, which indicate parts of a page that you want to emphasize to the user. Thanks to them user has better orientation over page content and be able to jump between different chapters.
Plugin also includes advanced settings panel that allows to configure much of its functionality.
Plugin Features
- jQuery Powered
- Support For Mobile Devices
- Progress Bar Indicating The Reading Progress
- Support For Sections
- Automatic And Manual Section Configuration
- Tooltips With Section Details
- Navigation Menu Displaying Current Section
- Additional Menu Listing Available Sections
- Build-In Navigation Widget
- Build-In Post Settings
- Build-In Global Settings
- 800+ Fonts Variants to Choose
- Customizable colors
- Support for translations
- Crossbrowser Compatible
- Documentation With Step-By-Step Guide Included
- Instructional Videos
Instructional Video
Step-by-step Guide
Plugin installation
To install Site Content Navigator For WordPress plugin please login to your WordPress Dashboard and go to 'Plugins->Add New' panel, now click on 'Upload' option located in top left corner of the page. Over there you can select plugin .zip file located on your computer, use 'Install Now' button and after successfull installation you can activate the plugin.
Settings panel
Generall settings panel can be found in WordPress dashboard under 'Settings->Site Content Navigator' menu item. Over there you can configure several options, including:
- Base options
- Navigation bar
- Sections
- Sections Tooltips
- Fonts and custom CSS
These options have globall effect and will be used by default on your site.
Base options
Post types - option that allows you to choose for which post types the plugin will be active, by default posts and pages are supported.
Processing method - specifies how plugin will intercept the page content. Default method is based on output buffering. The other method is using the_content WordPress filter. Second option may not work correctly if you're using theme or a plugin that calls the_content method more than once on a page.
Progress bar algorithm - specifies how plugin will calculate the reading progress. In algorithm 1 the progress bar indicates the read content. For algorithm 2 the progress bar represents the screen offset from document top.
Navigation bar
Enable navigation bar - option allows to enable the navigation bar
Bar ending - default value 'End of content' means that progress bar will ignore everything after post content. For 'End of page' the progress bar will be active to the very end of a page.
Overlap site content - navigation bar is using fixed positioning, which normally would overlap the site content. Setting this option to 'Disable' allows to move the site content down, this way everything should be visible.
Progress bar height - height of progress bar in px.
Progress bar color 1 - represents the color of 'completed' part in the progress bar.
Progress bar color 2 - represents the color of 'in progress' part in the progress bar.
Progress bar color 3 - represents the color of 'remaining' part in the progress bar.
Sections
Enable sections - specify if the navigation bar should display sections.
Section offset - clicking round section marker in the progress bar will cause the browser window to scroll to this section. This option specifies how much space above the section will be shown.
Section selectors - option allows you to specify CSS selectors, that will be used to identify the sections in your document. For example selector '.post h3' will search for all h3 HTML tags that are a children of 'post' class. You can define multiple selectors, just separate them by using a comma character.
Plugin will automatically search for your sections and will try to set appropriate title and short description based on the text available right after the found section. If you want to customize sections on particular page, then you can simply edit this page and in 'Site Content Navigator' box you have advanced options that allow to configure your sections. More on this can be found in the Post configuration section.
Section title selectors - option similar to the above. Allows to set specific title selector if your HTML structure is more advanced.
Section image selectors - option similar to the above. Allows to set specific image selector if your HTML structure is more advanced.
Sections container selectors - selector for the HTML wrapper that contains all page sections.
Show section marks - by default the section marks will be always displayed. Second option 'on hover' will hide the section marks, user will have to hover over the navigation bar to see them.
Navigation menu - by default the navigation menu is always displayed. You can also set this to 'Visible on hover' or 'Disabled' to hide it completely.
Sections Tooltips
Section tooltip - specify if the tooltips should be available.
Section tooltip image - if enabled, then the tooltip will try to show section image.
Section tooltip description - if enabled, then the tooltip will try to show section description.
Section description lenght - maximum number of words for section description. Applies only to sections generated automatically.
Section tooltip pagination - specify if the tooltip should show section pagination at the bottom.
Section tooltip background - set the background color of the tooltip box.
Fonts and custom CSS
Header font - allows to set the font for the header element. You can specify your own font name or select one of the available Google font.
Text font - allows to set the font for the base element. You can specify your own font name or select one of the available Google font.
Custom CSS - if needed, you can specify custom CSS code that will be used for the navigation bar.
Post configuration
Post configuration allows to override the default options set in the plugin settings panel. If necessary, you can specify different section selectors and configure each site section.
To configure post sections you have to set 'Post sections' option to 'Custom', then you will notice two new buttons: 'Add' and 'Search'.
Button 'Add' allows you to add new section manually, it will create new form where you can configure details of your section. The 'Class' field must contain unique value that will help identify your section, then you must assign it to your element in the Text editor, sample: <span class="my-section-1">Lorem Ipsum</span>
Second button 'Search' allows to find sections automatically based on the current post content and specified section selectors. For each section it will generate unique class value that will help to identify it, it will also modify the content of main editor to include those classes in the code.
By using 'Delete' button you can delete sections that you don't want to appear on your site.
Widget configuration
Plugin also includes built-in Navigation Widget that you can assign to the sidebar on your site. You can use it to inform users what sections are available on the page and their current position.
By default Navigation widget is set as sticky, which means that it will be constantly visible while scrolling the browser window. Any other widgets assigned to this sidebar, will be displayed behind him.
CSS Styles
The plugin uses the following cascade of styles (in order):
- style/style.css - main style sheet for plugin,
- style/responsive.css - style sheet for mobile devices,
- admin/style.css - style sheet for WP dashboard,
- admin/colorpicker.css - style sheet for Colorpicker plugin.
Changelog
24 February 2017, ver. 1.0
- First release
Support
Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.
We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.